<template>
  <div class="min-h-screen bg-gradient-to-br from-stone-50 via-neutral-50 to-amber-50/30 flex items-center justify-center p-4 relative overflow-hidden">
    <!-- 动态背景装饰 -->
    <div class="absolute inset-0 overflow-hidden">
      <!-- 浮动圆形装饰 -->
      <div class="absolute -top-40 -left-40 w-80 h-80 bg-gradient-to-br from-amber-100/40 to-orange-100/30 rounded-full blur-3xl animate-pulse"></div>
      <div class="absolute -bottom-40 -right-40 w-96 h-96 bg-gradient-to-br from-stone-100/50 to-neutral-100/40 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s"></div>
      <div class="absolute top-1/3 -right-20 w-64 h-64 bg-gradient-to-br from-yellow-50/60 to-amber-50/50 rounded-full blur-2xl animate-pulse" style="animation-delay: 4s"></div>
      <div class="absolute bottom-1/3 -left-20 w-72 h-72 bg-gradient-to-br from-neutral-100/40 to-stone-100/60 rounded-full blur-2xl animate-pulse" style="animation-delay: 1s"></div>
      
      <!-- 动态图标装饰 -->
      <div class="absolute top-20 left-20 text-amber-200/30 animate-bounce" style="animation-delay: 0.5s">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="absolute top-32 right-32 text-stone-200/40 animate-bounce" style="animation-delay: 1.5s">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="absolute bottom-32 left-32 text-amber-200/20 animate-bounce" style="animation-delay: 2.5s">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>
    
    <!-- 登录卡片容器 -->
    <div class="w-full max-w-6xl bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl shadow-stone-500/8 overflow-hidden border border-white/40 relative z-10">
      <div class="flex min-h-[420px]">
        <!-- 左侧品牌展示区 -->
        <div class="hidden lg:flex lg:flex-1 bg-gradient-to-br from-stone-100 via-neutral-100 to-amber-50 relative overflow-hidden">
          <!-- 装饰性网格 -->
          <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg width=%2260%22 height=%2260%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3Cpattern id=%22grid%22 width=%2260%22 height=%2260%22 patternUnits=%22userSpaceOnUse%22%3E%3Cpath d=%22m 60 0 l 0 60 l -60 0 l 0 -60 z%22 fill=%22none%22 stroke=%22rgba(120,113,108,0.1)%22 stroke-width=%221%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22100%25%22 height=%22100%25%22 fill=%22url(%23grid)%22 /%3E%3C/svg%3E')"></div>
          
          <!-- 浮动装饰元素 -->
          <div class="absolute top-10 left-10 w-32 h-32 bg-amber-100/20 rounded-full blur-xl animate-pulse"></div>
          <div class="absolute bottom-10 right-10 w-24 h-24 bg-stone-200/30 rounded-full blur-lg animate-pulse" style="animation-delay: 1s"></div>
          <div class="absolute top-1/2 left-20 w-16 h-16 bg-neutral-200/25 rounded-full blur-lg animate-pulse" style="animation-delay: 2s"></div>
          
          <!-- 农业相关图标装饰 -->
          <div class="absolute top-16 right-16 text-amber-600/20 animate-bounce" style="animation-delay: 0.8s">
            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h3.5a3.5 3.5 0 100-7H11V3.414l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 3.414V6H5.5A3.5 3.5 0 002 9.5z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="absolute bottom-20 left-16 text-stone-500/15 animate-bounce" style="animation-delay: 2.2s">
            <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20">
              <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
            </svg>
          </div>
          
          <!-- 内容区 -->
          <div class="relative z-10 flex flex-col justify-center px-12 xl:px-16 text-stone-700">
            <!-- Logo区域 -->
            <div class="mb-8">
              <div class="inline-flex items-center justify-center w-20 h-20 bg-white/60 backdrop-blur-sm rounded-2xl mb-6 border border-stone-200/50 shadow-lg">
                <svg class="w-10 h-10 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3C8.5 3 6 5.5 6 9c0 4.5 6 12 6 12s6-7.5 6-12c0-3.5-2.5-6-6-6z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" />
                </svg>
              </div>
              <h1 class="text-4xl xl:text-5xl font-bold mb-4 leading-tight text-stone-800">
                {{ title }}
              </h1>
              <p class="text-xl text-stone-600 font-light tracking-wide">
                智慧农业 · 数字未来
              </p>
            </div>
            
            <!-- 功能特性 -->
            <div class="space-y-5">
              <div v-for="(feature, index) in features" :key="index" 
                   class="flex items-center space-x-4 group cursor-default">
                <div class="flex-shrink-0 w-14 h-14 bg-white/60 backdrop-blur-sm rounded-xl flex items-center justify-center border border-stone-200/50 group-hover:bg-white/80 transition-all duration-300 shadow-sm">
                  <el-icon class="text-amber-600 text-3xl transition-colors duration-300 group-hover:text-amber-700">
                    <component :is="feature.icon" />
                  </el-icon>
                </div>
                <div class="flex-1">
                  <h3 class="text-lg font-semibold mb-1 text-stone-800 group-hover:text-amber-700 transition-colors">{{ feature.title }}</h3>
                  <p class="text-stone-600/90 text-sm leading-relaxed">{{ feature.desc }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧登录表单区 -->
        <div class="flex-1 flex flex-col min-h-[420px]">
          <!-- 顶部工具栏 -->
          <div class="flex justify-end p-4 lg:p-6">
            <lang-select />
          </div>

          <!-- 表单内容 -->
          <div class="flex-1 flex flex-col justify-center px-6 lg:px-12 xl:px-16 pb-6">
            <!-- 表单标题 -->
            <div class="mb-6">
              <h2 class="text-3xl xl:text-4xl font-bold text-stone-800 mb-2">
                欢迎回来
              </h2>
              <p class="text-stone-600">
                请登录您的账户以继续使用系统
              </p>
            </div>

            <!-- 登录表单 -->
            <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="space-y-4">
              <!-- 租户选择 -->
              <el-form-item v-if="tenantEnabled" prop="tenantId" class="form-item">
                <label class="block text-sm font-semibold text-stone-700 mb-2 flex items-center space-x-2">
                  <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H9m0 0H5m0 0h2M7 7h10M7 11h4" />
                  </svg>
                  <span>租户</span>
                </label>
                <el-select 
                  v-model="loginForm.tenantId" 
                  filterable 
                  size="large"
                  :placeholder="proxy.$t('login.selectPlaceholder')" 
                  class="w-full h-12 modern-select"
                >
                  <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
                  <template #prefix><svg-icon icon-class="company" class="text-stone-400" /></template>
                </el-select>
              </el-form-item>

              <!-- 用户名 -->
              <el-form-item prop="username" class="form-item">
                <label class="block text-sm font-semibold text-stone-700 mb-2 flex items-center space-x-2">
                  <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                  <span>用户名</span>
                </label>
                <el-input 
                  v-model="loginForm.username" 
                  type="text" 
                  size="large" 
                  auto-complete="off" 
                  :placeholder="proxy.$t('login.username')"
                  class="h-12 modern-input"
                >
                  <template #prefix><svg-icon icon-class="user" class="text-stone-400" /></template>
                </el-input>
              </el-form-item>

              <!-- 密码 -->
              <el-form-item prop="password" class="form-item">
                <label class="block text-sm font-semibold text-stone-700 mb-2 flex items-center space-x-2">
                  <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                  <span>密码</span>
                </label>
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  size="large"
                  auto-complete="off"
                  :placeholder="proxy.$t('login.password')"
                  class="h-12 modern-input"
                  @keyup.enter="handleLogin"
                >
                  <template #prefix><svg-icon icon-class="password" class="text-stone-400" /></template>
                </el-input>
              </el-form-item>

              <!-- 验证码 -->
              <el-form-item v-if="captchaEnabled" prop="code" class="form-item">
                <div class="flex flex-col items-start gap-2">
                  <label class="text-sm font-semibold text-stone-700 flex items-center space-x-2 whitespace-nowrap">
                    <svg class="w-4 h-4 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>验证码</span>
                  </label> 
                  <div class="flex items-center justify-between gap-3 w-full">
                    <el-input
                      v-model="loginForm.code"
                      size="large"
                      auto-complete="off"
                      :placeholder="proxy.$t('login.code')"
                      class="flex-1 h-12 modern-input"
                      @keyup.enter="handleLogin"
                    >
                      <template #prefix><svg-icon icon-class="validCode" class="text-stone-400" /></template>
                    </el-input>
                    <div @click="getCode" 
                        class="w-28 h-12 bg-stone-50 rounded-xl border-2 border-stone-200 hover:border-amber-400 cursor-pointer transition-all duration-200 overflow-hidden flex items-center justify-center group flex-shrink-0 ml-auto">
                      <img v-if="codeUrl" :src="codeUrl" class="w-full h-full object-contain group-hover:scale-105 transition-transform" />
                      <span v-else class="text-stone-400 text-xs">点击刷新</span>
                    </div>
                  </div>
                </div>
              </el-form-item>

              <!-- 记住密码和忘记密码 -->
              <div class="flex items-center justify-between py-2">
                <el-checkbox v-model="loginForm.rememberMe" class="modern-checkbox">
                  <span class="text-stone-600 font-medium">{{ proxy.$t('login.rememberPassword') }}</span>
                </el-checkbox>
                <a href="#" class="text-amber-600 hover:text-amber-700 font-semibold text-sm transition-colors">
                  忘记密码？
                </a>
              </div>

              <!-- 登录按钮 -->
              <el-form-item class="mb-4">
                <el-button 
                  :loading="loading" 
                  size="large" 
                  type="primary" 
                  class="w-full h-12 bg-gradient-to-r from-amber-600 to-orange-500 hover:from-amber-700 hover:to-orange-600 border-0 rounded-xl font-semibold text-base transition-all duration-200 hover:shadow-lg hover:shadow-amber-500/25 hover:-translate-y-0.5" 
                  @click.prevent="handleLogin"
                >
                  <span v-if="!loading" class="flex items-center justify-center space-x-2">
                    <span>{{ proxy.$t('login.login') }}</span>
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                  </span>
                  <span v-else class="flex items-center justify-center space-x-2">
                    <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span>{{ proxy.$t('login.logging') }}</span>
                  </span>
                </el-button>
              </el-form-item>

              <!-- 注册链接 -->
              <div v-if="register" class="text-center pt-2">
                <span class="text-stone-500">还没有账号？</span>
                <router-link :to="'/register'" class="text-amber-600 hover:text-amber-700 font-semibold ml-2 transition-colors">
                  {{ proxy.$t('login.switchRegisterPage') }}
                </router-link>
              </div>
            </el-form>
          </div>

          <!-- 底部版权信息 -->
          <div class="px-6 lg:px-12 xl:px-16 pb-4">
            <div class="border-t border-stone-100 pt-4 text-center space-y-2">
              <p class="text-sm text-stone-500">
                © 2025 嘉祥县壹加壹农业种植农民专业合作社 All Rights Reserved.
              </p>
              <p class="text-xs text-stone-400">
                <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer" 
                   class="hover:text-amber-600 transition-colors">
                  鲁ICP备2025191607号
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCodeImg, getTenantList } from '@/api/login';
import { authBinding } from '@/api/system/social/auth';
import { useUserStore } from '@/store/modules/user';
import { LoginData, TenantVO } from '@/api/types';
import { to } from 'await-to-js';
import { HttpStatus } from '@/enums/RespEnum';
import { useI18n } from 'vue-i18n';
import { DataAnalysis, Connection, Cpu } from '@element-plus/icons-vue';
import type { Component, ComponentInternalInstance } from 'vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const title = import.meta.env.VITE_APP_TITLE;
const userStore = useUserStore();
const router = useRouter();
const { t } = useI18n();

// 功能特性展示
const features = ref<Array<{ icon: Component; title: string; desc: string }>>([
  {
    icon: DataAnalysis,
    title: '智能分析',
    desc: '数据驱动决策，精准农业管理'
  },
  {
    icon: Connection,
    title: '互联互通',
    desc: '连接农户与市场，畅通供需渠道'
  },
  {
    icon: Cpu,
    title: '技术赋能',
    desc: '现代科技助力传统农业升级'
  }
]);

const loginForm = ref<LoginData>({
  tenantId: '000000',
  username: 'admin',
  password: 'admin123',
  rememberMe: false,
  code: '',
  uuid: ''
} as LoginData);

const loginRules: ElFormRules = {
  tenantId: [{ required: true, trigger: 'blur', message: t('login.rule.tenantId.required') }],
  username: [{ required: true, trigger: 'blur', message: t('login.rule.username.required') }],
  password: [{ required: true, trigger: 'blur', message: t('login.rule.password.required') }],
  code: [{ required: true, trigger: 'change', message: t('login.rule.code.required') }]
};

const codeUrl = ref('');
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 租户开关
const tenantEnabled = ref(true);

// 注册开关
const register = ref(false);
const redirect = ref('/');
const loginRef = ref<ElFormInstance>();
// 租户列表
const tenantList = ref<TenantVO[]>([]);

watch(
  () => router.currentRoute.value,
  (newRoute: any) => {
    redirect.value = newRoute.query && newRoute.query.redirect && decodeURIComponent(newRoute.query.redirect);
  },
  { immediate: true }
);

const handleLogin = () => {
  loginRef.value?.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      loading.value = true;
      // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        localStorage.setItem('tenantId', String(loginForm.value.tenantId));
        localStorage.setItem('username', String(loginForm.value.username));
        localStorage.setItem('password', String(loginForm.value.password));
        localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
      } else {
        // 否则移除
        localStorage.removeItem('tenantId');
        localStorage.removeItem('username');
        localStorage.removeItem('password');
        localStorage.removeItem('rememberMe');
      }
      // 调用action的登录方法
      const [err] = await to(userStore.login(loginForm.value));
      if (!err) {
        const redirectUrl = redirect.value || '/';
        await router.push(redirectUrl);
        loading.value = false;
      } else {
        loading.value = false;
        // 重新获取验证码
        if (captchaEnabled.value) {
          await getCode();
        }
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

/**
 * 获取验证码
 */
const getCode = async () => {
  const res = await getCodeImg();
  const { data } = res;
  captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
  if (captchaEnabled.value) {
    codeUrl.value = 'data:image/gif;base64,' + data.img;
    loginForm.value.uuid = data.uuid;
  }
};

const getLoginData = () => {
  const tenantId = localStorage.getItem('tenantId');
  const username = localStorage.getItem('username');
  const password = localStorage.getItem('password');
  const rememberMe = localStorage.getItem('rememberMe');
  loginForm.value = {
    tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId,
    username: username === null ? String(loginForm.value.username) : username,
    password: password === null ? String(loginForm.value.password) : String(password),
    rememberMe: rememberMe === null ? false : Boolean(rememberMe)
  } as LoginData;
};

/**
 * 获取租户列表
 */
const initTenantList = async () => {
  const { data } = await getTenantList(false);
  tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
  if (tenantEnabled.value) {
    tenantList.value = data.voList;
    if (tenantList.value != null && tenantList.value.length !== 0) {
      loginForm.value.tenantId = tenantList.value[0].tenantId;
    }
  }
};

/**
 * 第三方登录
 * @param type
 */
const doSocialLogin = (type: string) => {
  authBinding(type, loginForm.value.tenantId).then((res: any) => {
    if (res.code === HttpStatus.SUCCESS) {
      // 获取授权地址跳转
      window.location.href = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

onMounted(() => {
  getCode();
  initTenantList();
  getLoginData();
});
</script>

<style>
/* Element Plus 自定义样式 - 乳白色系 */
.modern-input :deep(.el-input__wrapper) {
  background-color: #fafaf9;
  border: 2px solid #e7e5e4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(120, 113, 108, 0.08);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 16px;
}

.modern-input :deep(.el-input__wrapper:hover) {
  border-color: #d97706;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.1);
}

.modern-input :deep(.el-input__wrapper.is-focus) {
  border-color: #d97706;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1), 0 4px 12px rgba(217, 119, 6, 0.15);
}

.modern-input :deep(.el-input__inner) {
  color: #44403c;
  font-weight: 500;
  font-size: 15px;
}

.modern-input :deep(.el-input__inner::placeholder) {
  color: #a8a29e;
  font-weight: 400;
}

.modern-select :deep(.el-input__wrapper) {
  background-color: #fafaf9;
  border: 2px solid #e7e5e4;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(120, 113, 108, 0.08);
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 16px;
}

.modern-select :deep(.el-input__wrapper:hover) {
  border-color: #d97706;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.1);
}

.modern-select :deep(.el-input__wrapper.is-focus) {
  border-color: #d97706;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1), 0 4px 12px rgba(217, 119, 6, 0.15);
}

.modern-checkbox :deep(.el-checkbox__inner) {
  border-radius: 6px;
  border-width: 2px;
  transition: all 200ms;
  border-color: #d6d3d1;
}

.modern-checkbox :deep(.el-checkbox__inner:hover) {
  border-color: #d97706;
}

.modern-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
  border-color: #d97706;
}

.form-item :deep(.el-form-item__error) {
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}
</style>
